<template>
  <div id="rt_title">
    <h2 style="color: aliceblue">博客运行时间</h2>
  </div>
  <div id="rt">
    <div id="clock">
      <div id="tsDots" style="--clr: rgb(22, 198, 230)"></div>
      <div id="hrDots" style="--clr: #ff2972"></div>
      <div id="minDots" style="--clr: #fee800"></div>
      <div id="secDots" style="--clr: #04fc43"></div>
    </div>
  </div>
</template>
<script setup>
import variable from "../../js/variable";

function clock() {
  var date = new Date();
  var hours = date.getHours();
  hours = hours === 0 ? 12 : hours;

  var tsDots = "";
  for (var i = 1; i < 366; i++) {
    tsDots += '<div class="dot" style="transform: rotate(' + i + 'deg)"></div>';
  }

  //秒钟的指针
  var secondsDots = "";
  for (var i = 1; i < 61; i++) {
    var rotation = i * 6;
    if (i === date.getSeconds()) {
      secondsDots +=
        '<div class="dot active" style="transform: rotate(' +
        rotation +
        'deg)"></div>';
    } else {
      secondsDots +=
        '<div class="dot" style="transform: rotate(' +
        rotation +
        'deg)"></div>';
    }
  }

  //分钟的指针
  var minutesDots = "";
  for (var i = 1; i < 61; i++) {
    var rotation = i * 6;
    if (i === date.getMinutes()) {
      minutesDots +=
        '<div class="dot active" style="transform: rotate(' +
        rotation +
        'deg)"></div>';
    } else {
      minutesDots +=
        '<div class="dot" style="transform: rotate(' +
        rotation +
        'deg)"></div>';
    }
  }

  //时钟的指针
  var hoursDots = "";
  for (var i = 1; i < 25; i++) {
    var rotation = i * 15;
    if (i === hours) {
      hoursDots +=
        '<div class="dot active" style="transform: rotate(' +
        rotation +
        'deg)"></div>';
    } else {
      hoursDots +=
        '<div class="dot" style="transform: rotate(' +
        rotation +
        'deg)"></div>';
    }
  }

  //添加元素
  document.getElementById("tsDots").innerHTML =
    tsDots + `<h2>` + variable.pzsz.value.yxtime + `<span>天</span></h2>`;

  document.getElementById("hrDots").innerHTML =
    hoursDots + `<h2>` + zero(hours) + `<span>小时</span></h2>`;

  document.getElementById("minDots").innerHTML =
    minutesDots + `<h2>` + zero(date.getMinutes()) + `<span>分钟</span></h2>`;

  document.getElementById("secDots").innerHTML =
    secondsDots + `<h2>` + zero(date.getSeconds()) + `<span>秒</span></h2>`;
}

function zero(number) {
  if (number < 10) {
    return "0" + number;
  }
  return number;
}

let dsq = setInterval(clock, 1000);

// 在组件销毁时清除定时器
onBeforeUnmount(() => {
  clearInterval(dsq);
});
</script>
<style>
#rt_title {
  background-color: #2f363e;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 10px;
}
#rt {
  padding: 0 40px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  user-select: none;
  height: 100px;
  background-color: #2f363e;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;

  display: flex;
  justify-content: center;
}

#clock {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 50px;
}

#tsDots,
#hrDots,
#minDots,
#secDots {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;

  rotate: 90deg;
}

#tsDots::before,
#hrDots::before,
#minDots::before,
#secDots::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.25),
    10px 10px 70px rgba(0, 0, 0, 0.25), inset 5px 5px 10px rgba(0, 0, 0, 0.5),
    inset 5px 5px 20px rgba(255, 255, 255, 0.2),
    inset -5px -5px 15px rgba(0, 0, 0, 0.75);
}

#tsDots h2,
#secDots h2,
#minDots h2,
#hrDots h2 {
  position: absolute;
  text-align: center;
  inset: 0;
  color: var(--clr);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: rotate(-90deg);
}

#tsDots h2 span,
#secDots h2 span,
#minDots h2 span,
#hrDots h2 span {
  color: var(--clr);
  position: absolute;
  font-weight: 500;
  font-size: 0.5rem;
  bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

#secDots b {
  position: absolute;
  color: #fff;
  display: inline-flex;
  font-size: 0.5rem;
  font-weight: 100;
  transform: rotate(-90deg) translate(7px, 10px);
}

#tsDots .dot,
#secDots .dot,
#minDots .dot,
#hrDots .dot {
  position: absolute;
  top: 50%;
  left: -15px;
  width: 3px;
  height: 1px;
  background: var(--clr);
  transform-origin: 35px;
}

#secDots .active.dot,
#minDots .active.dot,
#hrDots .active.dot {
  background: var(--clr);
  box-shadow: 0 0 10px var(--clr), 0 0 20px var(--clr), 0 0 30px var(--clr);
}

#secDots .active.dot ~ .dot,
#minDots .active.dot ~ .dot,
#hrDots .active.dot ~ .dot {
  background: #555;
}

#secDots .dot:nth-child(5n + 5),
#minDots .dot:nth-child(5n + 5) {
  width: 5px;
}

#hrDots .dot {
  width: 6px;
}
</style>